<template>
  <div class="page-container">
    <ex_super_form
      ref="form"
      v-bind="option"
      v-loading="loading"
      class="common-form-row flex_auto"
      label-position="right"
      label-width="140px"
      style="overflow-y: auto"
    >
    </ex_super_form>
    <div style="margin-left: 140px" class="mg_t2">
      <el-button type="primary" @click="submitForm()">{{
        $tt("label_confirm")
      }}</el-button>
      <el-button @click="return_page_back">{{ $tt("label_cancel") }}</el-button>
    </div>
  </div>
</template>

<script>
import router_params from "@/mixin/router_params";
export default {
  mixins: [router_params],
  components: {},
  props: {},
  data() {
    return {
      edit: false,
      disabled: false,
      loading: false,
      option: {
        inputClass: "w_fill",

        default: {
          platformType: "GENERAL",
          settleMethod: "PAYMENT_SHIPMENT",
        },
        model: [
          { header: "label_customer_info" },
          {
            grid: [
              [
                {
                  span: 1,
                  col: {
                    label: "label_customer",
                    key: "customerId",
                    // type: "common_customer_choose"
                    render: (h, { data, item }) => {
                      return h("common_customer_choose", {
                        props: {
                          value: data[item.key],
                          disabled:this.disabled,
                        },
                        on: {
                          changeItem: (e) => {
                            const { customerName, customerId, customerCode } = e;
                            this.$set(data, item.key, customerId);
                            this.$set(data, "customerName", customerName);
                            this.$set(data, "customerCode", customerCode);
                            this.$refs.form.$refs.form.clearValidate(
                              "customerId"
                            );
                          },
                        },
                      });
                    },
                  },
                }
              ],
            ],
          },
          { header: "label_base_info" },
          {
            grid: [
              [
                {
                  span: 1,
                  col: {
                    key: "platformType",
                    label: "label_supplier_platform_type",
                    type: "select",
                    enum: "PurchasePlatformTypeEnum",
                    disabled: (data) => !_.isEmpty(data.id),
                  },
                },
                {
                  span: 1,
                  col: {
                    key: "settleMethod",
                    label: "label_supplier_means_payments",
                    type: "select",
                    enum: "SupplierSettleMethodEnum",
                    disabled: (data) => this.disabled,
                  },
                },
              ],
            ],
          },
          {
            if: (data) => data.platformType !== "ALIBABA",
            grid: [
              [
                {
                  span: 2,
                  col: {
                    label: "",
                    key: "systemDefault",
                    render: (h, { data, item }) => {
                      return (
                        <div class="flex_row_center">
                          <el-checkbox true-label="Y" false-label="" value={data.systemDefault} onInput={e => this.$set(data, 'systemDefault', e)}>
                            {this.$tt('label_supplier_system_default')}
                          </el-checkbox>
                        </div>)
                    }
                  }
                }
              ],
              [
                {
                  span: 2,
                  col: {
                    key: "supplierName",
                    label: "label_supplier_good_name",
                  },
                }
              ],
              [
                {
                  span: 2,
                  col: {
                    key: "supplierCode",
                    disabled: (data) => this.disabled,
                    label: "label_supplier_vendor_code",
                    placeholder: "",
                  },
                }
              ],
              [
                {
                  span: 2,
                  col: {
                    key: "homepageUrl",
                    label: "label_supplier_homepage_url",
                  },
                }
              ]
            ],
          },
          {
            if: (data) => data.platformType === "ALIBABA",
            grid: [
              [
                {
                  span: 2,
                  col: {
                    key: "homepageUrl",
                    label: "label_supplier_homepage_url",
                    render: (h, { data, item }) => {
                      return h(
                        "el-input",
                        {
                          props: {
                            value: data.homepageUrl,
                            disabled: this.disabled,
                          },
                          on: {
                            input: (e) => {
                              this.$set(data, item.key, e.trim());
                            },
                          },
                        },
                        [
                          <el-button
                            slot="append"
                            disabled={this.disabled}
                            onClick={() => {
                              if (!data.customerId) {
                                this.$refs.form.$refs.form.validateField(
                                  "customerId"
                                );
                                return;
                              }
                              if (!data.homepageUrl) {
                                return;
                              }
                              const url = data.homepageUrl.match(
                                /^(?:https?:\/\/)?([^\/?]+)/
                              );
                              if (url && url[1]) {
                                this.$ajax({
                                  url: "/oms-api/purchase/OmsPurchaseSupplierRpc/getAlibabaRelationUserInfo.json",
                                  method: "post",
                                  loading: "loading",
                                  data: {
                                    platformUrl: url[1],
                                    customerId: data.customerId,
                                  },
                                  success: (res) => {
                                    this.$set(data, "homepageUrl", url[1]);
                                    this.$set(
                                      data,
                                      "supplierName",
                                      res.data.companyName
                                    );
                                    this.$set(
                                      data,
                                      "supplierCode",
                                      data.homepageUrl.split(".")[0]
                                    );
                                    this.$set(
                                      data,
                                      "platformSupplierCode",
                                      res.data.loginId
                                    );
                                  },
                                  complete: () => {},
                                });
                              }
                            }}
                          >
                            {this.$tt("label_gain")}
                          </el-button>,
                        ]
                      );
                    },
                  },
                },
                {
                  span: 2,
                  col: {
                    key: "supplierName",
                    label: "label_supplier_good_name",
                    disabled: true,
                    placeholder: "",
                  },
                },
                {
                  span: 2,
                  col: {
                    key: "supplierCode",
                    label: "label_supplier_vendor_code",
                    disabled: true,
                    placeholder: "",
                  },
                },
              ],
            ],
          },
          {
            grid: [
              [
                {
                  span: 2,
                  col: {
                    key: "companyAddress",
                    label: "label_supplier_company_address",
                  },
                },
              ],
              [
                {
                  span: 2,
                  col: {
                    key: "remark",
                    label: "label_supplier_postscript",
                  },
                },
              ],
            ],
          },
          { header: "label_base_contact_info" },
          {
            grid: [
              [
                {
                  span: 12,
                  col: {
                    key: "contacter",
                    label: "label_supplier_contacts",
                  },
                },
                {
                  span: 12,
                  col: {
                    key: "contacterPhone",
                    label: "label_supplier_phone",
                  },
                },
              ],
              [
                {
                  span: 12,
                  col: {
                    key: "email",
                    label: "label_supplier_mailbox",
                  },
                },
                {
                  span: 12,
                  col: {
                    key: "qq",
                    label: "QQ",
                  },
                },
              ],
              [
                {
                  span: 12,
                  col: {
                    key: "bankName",
                    label: "label_supplier_bank_card_name",
                  },
                },
                {
                  span: 12,
                  col: {
                    key: "bankAccount",
                    label: "label_supplier_bank_card_account",
                  },
                },
              ],
              [
                {
                  span: 12,
                  col: {
                    key: "paymentMethod",
                    label: "label_supplier_payment_method",
                    type: "select",
                    enum: "SupplierPaymentMethodEnum",
                  },
                },
                {
                  span: 12,
                  col: {
                    key: "payer",
                    label: "label_supplier_payee"
                  },
                },
              ],
            ],
          },
        ],
        rules: {
          supplierName: [
            {
              required: true,
              message: this.$tt("tip_can_no_empty"),
              trigger: "blur",
            },
          ],
          supplierCode: [
            {
              required: true,
              message: this.$tt("tip_can_no_empty"),
              trigger: "blur",
            },
          ],
          customerId: [
            {
              required: true,
              message: this.$tt("tip_can_no_empty"),
              trigger: "blur",
            },
          ],
          contacterPhone: [
            {
              trigger: "blur",
              validator: (r, v, cb) => {
                if (!this.$reg.PureNumber(v) && !!v) {
                  return cb(this.$tt("tip_contact_information"));
                }
                cb();
              },
            },
          ],
          qq: [
            {
              trigger: "blur",
              validator: (r, v, cb) => {
                if (!this.$reg.PureNumber(v) && !!v) {
                  return cb(this.$tt("tip_contact_QQ"));
                }
                cb();
              },
            },
          ],
          bankAccount: [
            {
              trigger: "blur",
              validator: (r, v, cb) => {
                if (!this.$reg.PureNumber(v) && !!v) {
                  return cb(this.$tt("tip_contact_bank_account"));
                }
                cb();
              },
            },
          ],
          homepageUrl: [
            {
              trigger: "blur",
              validator: (r, v, cb) => {
                if (!this.$reg.IsUrl(v) && !!v) {
                  return cb(this.$tt("tip_contact_URL"));
                }
                cb();
              },
            },
          ],
          platformUrl: [
            {
              trigger: "blur",
              validator: (r, v, cb) => {
                if (!this.$reg.IsUrl(v) && !!v) {
                  return cb(this.$tt("tip_contact_URL"));
                }
                cb();
              },
            },
          ],
          email: [
            {
              trigger: "blur",
              validator: (r, v, cb) => {
                if (!this.$reg.Email(v) && !!v) {
                  return cb(this.$tt("tip_contact_Email"));
                }
                cb();
              },
            },
          ],
        },
      },
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    init_data_default(into_params) {
      this.edit = !!into_params.id;
      this.disabled = !!into_params.id;
      if (into_params.id) {
          this.loading = true;
          this.$ajax({
            url: "/oms-api/purchase/OmsPurchaseSupplierRpc/selectDetail.json",
            method: "post",
            data: { id: into_params.id },
            success: (res) => {
              if (!res.data)
                return this.$message.error(this.$tt("label_data_loss"));
              this.$nextTick(() => {
                this.$refs.form.setData(res.data);
                this.$refs.form.clearValidate();
              });
              this.fixTabLabel(res.data.id);
            },
            complete: () => {
              this.loading = false;
            },
          });
        }
      this.fixTabLabel();
    },
    fixTabLabel(name) {
      if (this.edit) {
        this.$emit("tagModifyLabel", {
          _key: "label_name_code",
          name: this.$tt("label_edit_supplier"),
          code: name || "",
        });
      } else if (this.disabled) {
        this.$emit("tagModifyLabel", "label_add_supplier_details");
      } else {
        this.$emit("tagModifyLabel", "label_add_supplier");
      }
    },
    submitForm() {
      let url = this.edit
        ? "/oms-api/purchase/OmsPurchaseSupplierRpc/update.json"
        : "/oms-api/purchase/OmsPurchaseSupplierRpc/save.json";
      this.$refs["form"].validate((valid, obj) => {
        if (valid) {
          this.$ajax({
            url,
            method: "post",
            type: "json",
            loading: this.$tt("tip_submiting"),
            data: this.$refs.form.getFormData(),
            success: (res) => {
              this.$message.success(this.$tt("tip_submit_success"));
              this.return_emit(null, "reload");
              this.return_page_back();
            },
          });
        } else {
          this.$message.error(this.$tt("form_validate_error"));
          return false;
        }
      });
    },
  },
  destroyed() {},
};
</script>

<style lang="less" scoped>
</style>
